import React, { Component } from 'react';
import { Input } from 'antd'
import { DeleteOutlined, FormOutlined } from '@ant-design/icons'
import TheDialog from "../../../components/TheDialog";
import {
  apiGetHelpQuestionClassifyList,
  apiHelpClassifyAdd,
  apiHelpClassifyDel,
  apiHelpClassifyEdit
} from '@/request/configuration'
import '../style/index.less'
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";

class HelpCenter extends Component {
  inputRef = React.createRef()
  state = {
    dataSource: [],
    dialogStatus: false,
    btnLoading: false,
    dataSourceColumns: [
      {
        title: <div style={{ textAlign: 'center' }}>问题分类</div>,
        dataIndex: 'questionClassify',
        key: 'questionClassify',
        render: (text, record) => {
          return <div className={'question-item-classify'}>
            <p onClick={() => this.props.history.push(`/settings/helpCenter/editor/${record.questionClassifyId}`)}>{text}</p>
            <div className='button-group'>
              <TheButton haspermi={['set:helpCenter:edit']} type={'text'}
                onClick={e => this.update(e, record)}><FormOutlined /></TheButton>
              <TheButton haspermi={['set:helpCenter:delete']} type={'text'}
                onClick={e => this.del(e, record)}><DeleteOutlined /></TheButton>
            </div>
          </div>
        }
      }
    ],
    loading: false,
    editorData: null,
    formType: ''
  }

  async componentDidMount() {
    await this.getData()
  }

  getData = async () => {
    this.setState({
      loading: true
    })
    const dataSource = await apiGetHelpQuestionClassifyList({ questionClassifyLevel: 1 })
    if (dataSource.code === 0) {
      this.setState({
        dataSource: dataSource.data,
        loading: false
      })
    } else {
      this.setState({
        loading: false
      })
    }
  }

  del = (e, value) => {
    e.stopPropagation()
    React.$confirm({
      title: "警告",
      content: '确定删除此数据信息吗？',
      onOk: async () => {
        const data = await apiHelpClassifyDel({ questionClassifyId: value.questionClassifyId, questionClassifyLevel: 1 })
        if (data.code === 0) {
          await this.getData()
        }
      }
    });
  }

  update = (e, value) => {
    this.setState({
      title: '修改问题分类',
      editorData: value,
      formType: 'editor',
      dialogStatus: true,
      questionClassify: value.questionClassify
    })
  }

  openDialog = (type, record) => {
    this.setState({
      dialogStatus: true,
      formType: 'add'
    })
  }

  handleCancel = () => {
    this.setState({
      dialogStatus: false,
      editorData: null,
      formType: ''
    })
  }
  setName = (e) => {
    this.setState({ questionClassify: e.target.value })
  }
  handleOk = async () => {
    const { questionClassify, formType, editorData } = this.state
    if (!questionClassify) {
      return React.$message({
        type: 'error',
        content: '请输入问题分类名'
      })
    } else {
      if (formType === 'add') {
        let res = await apiHelpClassifyAdd({ questionClassify, questionClassifyLevel: 1 })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '新增成功'
          })
          this.handleCancel()
          this.getData()
        }
      } else {
        let res = await apiHelpClassifyEdit({ questionClassify, questionClassifyLevel: 1, questionClassifyId: editorData.questionClassifyId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '修改成功'
          })
          this.handleCancel()
          this.getData()
        }
      }
    }
  }

  render() {
    const { dataSource, dialogStatus, loading, dataSourceColumns, formType, editorData } = this.state
    return <div className={"p-layout-box configuration"}>
      <div className={'p-layout-content'}>
        <TheButton haspermi={['set:helpCenter:add']}  size={'middle'} type={'default'} auth={'helpCenter:add'}
          onClick={() => this.openDialog()}
          style={{ width: '100%', marginBottom: 20 }}>新增问题分类</TheButton>
        <TheTable scroll={{ x: 'max-content' }} rowClassName={'center-table'} loading={loading}
          dataSource={dataSource}
          columns={dataSourceColumns} />
        <TheDialog
          title={'新增问题分类'}
          visible={dialogStatus}
          handleCancel={this.handleCancel}
          handleOk={this.handleOk}
          width={400}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span>问题分类：</span>
            <Input defaultValue={(formType === 'editor' && editorData.questionClassify) ? editorData.questionClassify : ''} style={{ width: 280 }} placeholder='请输入问题分类名' maxLength={10} onChange={(e) => this.setName(e)} />
          </div>
        </TheDialog>
      </div>
    </div>
  }
}

export default HelpCenter